<template>
    <Menu class="cms-sider" theme="dark" :active-name="activeMenuName" @on-select="onSelectMenu">
        <MenuItem name="article" to="/index/blog/article">
            <Icon type="ios-paper"/>
            文章管理
        </MenuItem>
        <MenuItem name="catalog" to="/index/blog/catalog">
            <Icon type="ios-paper"/>
            栏目管理
        </MenuItem>
        <MenuItem name="comment" to="/index/blog/commentary">
            <Icon type="ios-paper"/>
            评论管理
        </MenuItem>
    </Menu>
</template>

<script>
    import MenuUtil from "@/util/MenuUtil"

    export default {
        name: "CmsSider",
        data() {
            return {
                activeMenuName: ""
            }
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            onSelectMenu(name) {
                // console.log(location.href)
            }
        },
        created() {
            this.activeMenuName = MenuUtil.activeMenu(location.href);
        }
    }
</script>

<style scoped>
    .cms-sider {
        position: fixed;
        height: calc(100% - 80px);
        overflow-y: auto;
    }
</style>